<template>
    <div>
       <common-head title="商品列表"/>
       <div class="wrap">
           <div class="filers">
               <div
               @click="switeOrder(0)"
                :class="['sale','filter',{active:active===0}]">
                   <span>销量</span>
               </div>
               <div
               @click="orderByPrice"
               :class="['price','filter',{active:active===1}]">
                   <span>价格</span>
                   <div :class="['triangle','up',
                   {active:active===1 && priceOrder===0}]"></div>
                   <div :class="['triangle','down',{active:active===1 && priceOrder===1}]"></div>
               </div>
               <div
                @click="switeOrder(2)"
                :class="['new','filter',{active:active===2}]">
                   <span>新品</span>
               </div>
           </div>
           <!-- 商品部分 -->
            <div class="items">
        <div class="item" @click='enterDetail(item.id)' v-for="item in items" :key="item.id">
          <img
            :src="item.pic"
            class="item-pic"
            alt=""
          />
          <div class="item-info">
            <h5>{{item.name}}</h5>
            <div class="item-price">
              <p class="price">￥{{item.minPrice}}</p>
              <van-icon name="gouwuche" class-prefix="icon" color="#ff734c" size='30'/>
            </div>
          </div>
        </div>
      </div>
       </div>
    </div>
</template>

<script>
import CommonHead from '_components/commonHead'
import { fetchItems } from '_api'
export default {
  data () {
    return {
      active: 0, // 0为销量   1为价格  2为新品
      priceOrder: 1, // 0为升序   1为降序
      items: []
    }
  },
  components: {
    CommonHead

  },
  computed: {
    orderBy () {
      let orderBy = 'ordersDown'
      switch (this.active) {
        case 0 :
          // 按照销量
          orderBy = 'ordersDown'
          break
        case 1:
          if (this.priceOrder === 0) {
            // 按照价格的升序
            orderBy = 'priceUp'
          } else {
            orderBy = 'priceDown'
          }
          break
        case 2:
          orderBy = 'addedUp'
          break
      }
      return orderBy
    }

  },
  created () {
    this.fetchItems()
  },
  methods: {
    enterDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    fetchItems () {
      fetchItems({
        categoryId: this.$route.query.cateId,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    switeOrder (active) {
      this.active = active
      this.fetchItems()
    },
    orderByPrice () {
      if (this.active !== 1) {
        this.active = 1
        this.priceOrder = 0
      } else {
        if (this.priceOrder === 0) {
          this.priceOrder = 1
        } else {
          this.priceOrder = 0
        }
      }
      this.fetchItems()
    }
  }
}

</script>

<style lang="scss" scoped>
.filers{
    display: flex;
    font-size: 14px;
    color: #333;
    height: 40px;
    background-color: #fff;
    border-top:0.025rem solid rgb(240, 233, 233) ;
    align-items: center;
    justify-content: space-around;
    // color: #ff734c;
    .filter{
           &.active{
      color: #ff734c;
    }
    }
    .price{
        position: relative;
        .triangle{
            width: 0;
            height: 0;
            border: 4px solid transparent;
             &.up{
            border-bottom-color: #999;
            position:absolute;
            right: -15px;
            top: -2px;
            &.active{
                 border-bottom-color: #ff734c;
            }
        }
             &.down{
                  border-top-color: #999;
                  position:absolute;
                  right: -15px;
                  top: 11px;
              &.active{
                 border-top-color: #ff734c;
            }
             }
        }
    }
}
.items {
    padding: 0 8px;

    .item {
      display: flex;
      background-color: #fff;
      border-radius: 0.25rem;
    margin-bottom:10px;
    overflow: hidden;
      img {
        width: 4.525rem;
        height: 4.925rem;
      }
      .item-info {

        flex: 1;
           padding:0 10px;
        h5 {
          margin: 0;
          color: #333;
          font-size: 16px;
          line-height: 40px;
          margin-bottom: 100px;
        }

        .item-price {
          display: flex;
           color: #232628;
        font-size: 17px;
        justify-content: space-between;
        align-items: center;
        p{
            margin:0;
        }
        }
      }
    }
  }
</style>
